<template>
  <div>
    <div style="position: relative; bottom: 10px">
      <a-button type="primary" @click="submit">{{ select_title }}</a-button>
    </div>

    <div>
      <a-form :model="form" :rules="rules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="商品分类名称" name="categoryName">
              <a-input v-model:value="form.categoryName" placeholder="请输入商品排序" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态" name="status">
              <a-space direction="vertical">
                <a-switch
                  v-model:checked="form.status"
                  checked-children="上架"
                  un-checked-children="不上架"
                />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="一级分类" name="pid">
              <a-select
                v-model:value="form.pid"
                show-search
                placeholder="一级分类"
                :options="options2"
                @change="handleChange2"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="店铺" name="businessId">
              <a-select
                v-model:value="form.businessId"
                show-search
                placeholder="选择店铺"
                :options="options"
                allowClear
                @change="handleChange"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="商品分类描述" name="categoryDesc">
              <a-textarea
                v-model:value="form.categoryDesc"
                placeholder="商品分类描述"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="商品分类图片" name="image">
              <div v-if="form.image" style="width: 120px; height: 120px">
                <img
                  :src="form.image"
                  @click="uploadImage"
                  style="width: 100%; height: 100%; object-fit: contain"
                />
              </div>
              <a-button v-else @click="uploadImage"> 上传图片</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form></div
    >
  </div>
</template>

<script lang="ts" setup>
  import { ref, onBeforeUpdate, onBeforeMount } from 'vue';
  import { Tinymce } from '/@/components/Tinymce/index';
  // import { message } from 'ant-design-vue';

  import { form } from './goodsType';

  let $emit = defineEmits(['onReturn', 'upload']);

  let props = defineProps(['select_type', 'select_title', 'select_data', 'uploadList']);

  {
    Tinymce;
  }

  function uploadImage() {
    $emit('upload', 'image');
  }

  function submit() {
    form.value.status = form.value.status ? 'normal' : 'destroy';
    if (props.select_title == '新增') $emit('onReturn', form.value, '新增');
    else $emit('onReturn', form.value, '编辑');
    // message.success('商品已提交,可以添加数据了');
  }

  const options2: any = ref([]);
  const options: any = ref([
    {
      label: '测试',
      value: '1',
    },
  ]);
  const handleChange = (value: any) => {
    form.value.businessId = value;
    console.log(`selected ${value}`);
  };
  const handleChange2 = (value: any) => {
    form.value.pid = value;
    console.log(`selected ${value}`);
  };

  const rules: any = {
    goodsName: [{ required: true, message: '请输入商品名称' }],
    scenery_cover: [{ required: true, message: '请输入排序位置' }],
    description: [{ required: true, message: 'Please enter url description' }],
  };
  onBeforeMount(() => {
    if (props.select_title == '编辑') {
      form.value = props.select_data;
    } else {
      form.value = {
        businessId: '',
        categoryDesc: '',
        categoryName: '',
        image: '',
        pid: '',
        status: true,
      };
    }
    options2.value = props.select_type;
  });
  onBeforeUpdate(() => {
    // 检查是否保存过规格

    console.log(form.value.image);

    if (props.select_title == '编辑') {
      form.value = props.select_data;
    } else {
      form.value = {
        businessId: '',
        categoryDesc: '',
        categoryName: '',
        image: '',
        pid: '',
        status: true,
      };
    }
    options2.value = props.select_type;
    if (props.uploadList) {
      form.value.image = props.uploadList[0].url;
    }
  });
</script>
<style scoped>
  .skuName {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #f1f1f1;
  }

  .skuValue {
    display: flex;
    align-items: center;

    /* justify-content: space-between; */
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #fcfbfb;
  }

  .dynamic-delete-button {
    position: relative;
    top: 4px;
    transition: all 0.3s;
    color: #999;
    font-size: 24px;
    cursor: pointer;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .skuValue_1 {
    /* padding: 5px 15px;
    background-color: rgb(245 245 245 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%); */

    color: white;
  }

  @keyframes fadenum {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .skuName_1 {
    color: #f1f1f1;
  }

  .skuName:hover {
    .skuName_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
    }
  }

  .skuValue:hover {
    .skuValue_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
      font-weight: 700;
    }
  }
</style>
